<template>
  <div id="app">
    <header>
      <nav>
        <div class="logo">
          <router-link to="/">
            <i class="fas fa-paw"></i>
            宠物商城
          </router-link>
        </div>
        <ul>
          <li><router-link to="/" exact>首页</router-link></li>
          <li><router-link to="/food">宠物食品</router-link></li>
          <li><router-link to="/toy">宠物玩具</router-link></li>
          <li><router-link to="/breed">宠物品种</router-link></li>
          <li class="cart-item">
            <router-link to="/cart">
              <i class="fas fa-shopping-cart"></i>
              购物车
              <span v-if="cartCount > 0" class="cart-badge">{{ cartCount }}</span>
            </router-link>
          </li>
          <!-- 未登录时显示登录链接 -->
          <li v-if="!isLoggedIn"><router-link to="/login" class="auth-btn login">登录</router-link></li>
           <!-- 未登录时显示注册链接 -->
          <li v-if="!isLoggedIn"><router-link to="/register" class="auth-btn register">注册</router-link></li>
          <!-- 已登录时显示用户信息和退出按钮 -->
          <li v-if="isLoggedIn" class="user-menu">
          <!-- 显示当前登录用户的用户名 -->
            <span class="username">{{ currentUser }}</span>
             <!-- 点击退出按钮调用 logout 方法 -->
            <button @click="logout" class="logout-btn">退出</button>
          </li>
        </ul>
      </nav>
    </header>
    <!-- 页面主体内容 -->
    <main>
      <!-- 路由视图组件，用于显示当前路由对应的组件 -->
      <!-- 当子组件触发 cart-updated 事件时，调用 updateCartCount 方法 -->
      <router-view @cart-updated="updateCartCount" />
    </main>

    <footer>
      <div class="footer-content">
        <div class="footer-section">
          <h3>关于我们</h3>
          <p>我们致力于为您的宠物提供优质的商品和服务</p>
        </div>
        <div class="footer-section">
          <h3>联系方式</h3>
          <p>电话：400-888-8888</p>
          <p>邮箱：support@petmall.com</p>
        </div>
        <div class="footer-section">
          <h3>关注我们</h3>
          <div class="social-links">
            <a href="#"><i class="fab fa-weixin"></i></a>
            <a href="#"><i class="fab fa-weibo"></i></a>
          </div>
        </div>
      </div>
      <!-- 底部版权信息 -->
      <div class="footer-bottom">
        <p>© 2025 宠物商城 版权所有</p>
      </div>
    </footer>
  </div>
</template>

<script>
// 引入 Vue 3 的响应式 API 和生命周期钩子
import { ref, onMounted } from 'vue'

export default {
  name: 'App',// 组件名称
  setup() {
    const cartCount = ref(0)// 定义购物车商品数量的响应式变量，初始值为 0
    // 定义是否登录的响应式变量，从 localStorage 中获取登录状态
    const isLoggedIn = ref(localStorage.getItem('isLoggedIn') === 'true')
    // 定义当前登录用户的响应式变量，从 localStorage 中获取用户名
    const currentUser = ref(localStorage.getItem('currentUser'))
    // 更新购物车商品数量的方法
    const updateCartCount = () => {
      // 从 localStorage 中获取购物车数据，如果不存在则初始化为空数组
      const cart = JSON.parse(localStorage.getItem('cart') || '[]')
      // 计算购物车中所有商品的总数量
      cartCount.value = cart.reduce((total, item) => total + item.quantity, 0)
    }
    // 用户退出登录的方法
    const logout = () => {
      // 从 localStorage 中移除登录状态
      localStorage.removeItem('isLoggedIn')
      // 从 localStorage 中移除当前用户信息
      localStorage.removeItem('currentUser')
      // 更新 isLoggedIn 变量为 false
      isLoggedIn.value = false
      // 清空当前用户信息
      currentUser.value = ''
      // 重定向到首页
      window.location.href = '/'
    }
    // 组件挂载完成后的生命周期钩子
    onMounted(() => {
      updateCartCount()// 初始化购物车商品数量
      // 监听 localStorage 的变化，当购物车数据更新时，更新购物车商品数量
      window.addEventListener('storage', updateCartCount)
    })
    // 返回需要在模板中使用的响应式变量和方法
    return {
      cartCount,
      isLoggedIn,
      currentUser,
      logout,
      updateCartCount
    }
  }
}
</script>

<style>
/* 引入 Noto Sans SC 字体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
/* 引入 Font Awesome 图标库 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 页面主体样式 */
body {
  font-family: 'Noto Sans SC', sans-serif;
  background-color: #F8F1F8;
  color: #333;
  line-height: 1.6;
}
/* 应用根容器样式 */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 页面头部样式 */
header {
  background: linear-gradient(135deg, #B784B7 0%, #9B6B9B 100%);/* 背景渐变 */
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(183, 132, 183, 0.2);/* 阴影效果 */
  position: sticky;/* 固定在页面顶部 */
  top: 0;
  z-index: 1000;/* 层级为 1000 */
}
/* 导航栏样式 */
nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;/* 使用 flex 布局，水平排列并两端对齐 */
  justify-content: space-between;
  align-items: center;
}
/* 网站 logo 样式 */
.logo a {
  color: white; /* 文字颜色 */
  text-decoration: none; /* 去除下划线 */
  font-size: 24px;/* 字体大小 */
  font-weight: bold;/* 字体加粗 */
  display: flex;/* 使用 flex 布局，水平排列 */
  align-items: center;
  gap: 10px;/* 元素之间的间距 */
}
/* 网站 logo 图标样式 */
.logo i {
  font-size: 28px; /* 图标大小 */
}
/* 导航栏链接列表样式 */
nav ul {
  list-style: none;/* 去除列表样式 */
  display: flex;/* 使用 flex 布局，水平排列 */
  align-items: center;
  gap: 20px;/* 元素之间的间距 */
}
/* 导航栏链接样式 */
nav ul li a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 20px;/* 圆角 */
  transition: all 0.3s ease; /* 过渡效果 */
}
/* 导航栏链接悬停样式 */
nav ul li a:hover {
  background: rgba(255, 255, 255, 0.2);/* 背景颜色 */
  transform: translateY(-2px); /* 向上偏移 2px */
}
/* 购物车链接样式 */
.cart-item {
  position: relative;/* 相对定位 */
}
/* 购物车商品数量徽章样式 */
.cart-badge {
  position: absolute; /* 绝对定位 */
  top: -8px;
  right: -8px;
  background: #9B6B9B;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
/* 登录和注册按钮样式 */
.auth-btn {
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 500;/* 字体加粗 */
  transition: all 0.3s ease;/* 过渡效果 */
}
/* 登录按钮样式 */
.auth-btn.login {
  background: transparent;/* 透明背景 */
  border: 2px solid white;/* 白色边框 */
}
/* 登录按钮悬停样式 */
.auth-btn.login:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);/* 向上偏移 2px */
}
/* 注册按钮样式 */
.auth-btn.register {
  background: white;
  color: #B784B7;
}
/* 注册按钮悬停样式 */
.auth-btn.register:hover {
  background: #F8F1F8;
  transform: translateY(-2px);
}
/* 用户菜单样式 */
.user-menu {
  display: flex;/* 使用 flex 布局，水平排列 */
  align-items: center;
  gap: 10px;
}
/* 用户名样式 */
.username {
  color: white;
  font-weight: 500;
}
/* 退出按钮样式 */
.logout-btn {
  background: transparent; /* 透明背景 */
  border: 2px solid white;/* 白色边框 */
  color: white;
  padding: 6px 12px;
  border-radius: 15px; /* 鼠标指针样式 */
  cursor: pointer;
  transition: all 0.3s ease;/* 过渡效果 */
}
/* 退出按钮悬停样式 */
.logout-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
/* 页面主体内容样式 */
main {
  flex: 1;/* 弹性增长 */
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
/* 页面底部样式 */
footer {
  background: #F8F1F8;
  color: #666;
  padding: 40px 0 20px;
  margin-top: 40px; /* 顶部外边距 */
  box-shadow: 0 -2px 10px rgba(183, 132, 183, 0.1);  /* 阴影效果 */
}
/* 底部内容区域样式 */
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;/* 使用网格布局 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}
/* 底部各部分标题样式 */
.footer-section h3 {
  margin-bottom: 15px;/* 底部外边距 */
  font-size: 1.2em;
  color: #B784B7;
}
/* 社交链接样式 */
.social-links {
  display: flex; /* 使用 flex 布局，水平排列 */
  gap: 15px;/* 元素之间的间距 */
  margin-top: 10px;/* 顶部外边距 */
}
/* 社交链接图标样式 */
.social-links a {
  color: #B784B7;
  font-size: 24px;/* 图标大小 */
  transition: all 0.3s ease;/* 过渡效果 */
}
/* 社交链接图标悬停样式 */
.social-links a:hover {
  color: #9B6B9B;
  transform: translateY(-2px);/* 向上偏移 2px */
}
/* 底部版权信息样式 */
.footer-bottom {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(183, 132, 183, 0.2);
}
/* 媒体查询，当屏幕宽度小于等于 768px 时的样式 */
@media (max-width: 768px) {
   /* 导航栏样式 */
  nav {
    flex-direction: column; /* 垂直排列 */
    gap: 15px; /* 元素之间的间距 */
  }
  /* 导航栏链接列表样式 */
  nav ul {
    flex-wrap: wrap;/* 换行排列 */
    justify-content: center;/* 水平居中 */
  }
  /* 底部内容区域样式 */
  .footer-content {
    grid-template-columns: 1fr; /* 单列布局 */
    text-align: center;
  }
  /* 社交链接样式 */
  .social-links {
    justify-content: center;
  }
}
</style>